<template>
	<div class="container">
		<!-- <st-navigation title="在线工地" @computedSize="handleComputedSize"></st-navigation> -->

		<view class="search-wrapper" :style="{ 'top': `${navBarHeight}px` }">
			<view class="search">
				<view class="input">
					<input style="width: 90%" type="text" placeholder="地址" confirm-type="search" v-model="searchValue"
						@blur="handleSearch" @confirm="handleSearch" @input="handleSearch">
					<uni-icons class="search_icon" type="search" color="#CECED9" size="22" @click="handleSearch"></uni-icons>
				</view>
			</view>
		</view>

		<view class="main">
			<view v-for="(item, index) in liveList" :key="item.id" class="liveList">
				<view class="empty-wrap"></view>
				<view class="ysm-padding">
					<view class="ysm-mt" @click="handleClickVideo(index)">
						<view class="watch">
						  <view class="image-w">
						    <image src="../../static/images/ysmDesignerShop/icon-3.png" mode="widthFix"></image>
						  </view>
						  <text>{{ item.viewed_num }}</text>
						</view>
						<video
							v-if="item.isAutoPlay"
							id="myVideo"
							class="video"
							:src="item.video"
							enable-danmu
							danmu-btn
							controls
							:poster-for-crawler="item.video_img"
							:title="item.title"
							:autoplay="item.isAutoPlay"
						></video>
						<view v-else>
							<image class="video" :src="item.video_img"></image>
							<image class="icon-play play-bg" src="../../static/images/ysmMall/play-1.png" mode="widthFix"></image>
							<image class="icon-play play-triangle" src="../../static/images/ysmMall/play-2.png" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="info" @click="handleShowInfo(index)">
						<view class="left">日期: {{ item.createtime }}</view>
						<view class="right">
							<view class="address">地址: {{ item.addr }} </view>
							<view class="image-wrap">
								<image v-if="activeIndex === index" src="../../static/images/siteLive/bottom.png" style="width:100%;">
								</image>
								<image v-else src="../../static/images/siteLive/bottom.png" style="width:100%;" class="rotate-image"></image>
							</view>
						</view>
					</view>

					<view class="basic-wrap" v-show="activeIndex === index">
						<view class="basic-info-top">
							<view class="image-wrap">
								<!-- <image :src="item.user.avatar"></image> -->
								<StAvatar :designer="item.user"></StAvatar>

							</view>
							<view class="name">{{ item.user.username }}</view>
							<view class="sub-title" @click="handleToShop(item.user)">进店逛馆>> </view>
						</view>

						<view class="basic-info-con">
							<view class="title">基本信息</view>
							<!-- <view class="item">业主：{{ item.owner }}</view> -->
							<view class="item">
								<view>业主：{{ item.owner }}</view>
								<view>项目经理：{{ item.manager }}</view>
							</view>
							<view class="item">
								<view>图纸面积：{{ item.area }}</view>
								<view>设计取费：{{ item.work_salary }}</view>
							</view>
							<view class="item">
								<view>工程造价：{{ item.total_cost }}</view>
								<view>设计风格：{{ item.style }}</view>
							</view>
							<!-- <view class="item"> -->
							<!-- <view>设计师：{{ item.user.username }}</view> -->
							<!-- </view> -->
						</view>
					</view>
				</view>
			</view>
			<StEmpty v-if="isEmpty">暂无在线工地</StEmpty>
		</view>

	</div>
</template>

<script>
import StAvatar from '../../components/st-avatar/st-avatar.vue';
import StEmpty from '@/components/st-empty/st-empty.vue';
export default {
	components: {
		StEmpty,
		StAvatar
	},
	data() {
		return {
			isEmpty: false,
			
			navBarHeight: 40,
			liveList: [],
			activeIndex: -1,
			searchValue: '',
			showClearIcon: false,
		};
	},
	methods: {
		// 获取在线工地信息
		async getSiteLiveInfo() {
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			await this.$api.get({
				url: "/wanlshop/user/getBroadcastlist",
				data: {
					search: this.searchValue
				},
				success: (res) => {
					this.liveList = res.data;

					this.liveList = this.liveList.map((item) => {
						item.isAutoPlay = false;
						return item;
					});

					if (this.liveList.length == 0) {
						this.isEmpty = true;
					} else {
						this.isEmpty = false;
					}
				},
			});
			uni.hideLoading();

		},
		handleSearch() {
			// uni.navigateTo({
			// 	url: '/pagesYSM/ysmSearch/ysmSearch'
			// })
			this.getSiteLiveInfo();

		},
		handleShowInfo(index) {
			this.activeIndex === index ? this.activeIndex = -1 : this.activeIndex = index;
		},
		handleToShop(item) {
			uni.navigateTo({
				url: `/pagesYSM/ysmDesignerShop/ysmDesignerShop?shop_id=${item.id}`
			})
		},
		handleComputedSize(evt) {
			let { navBarHeight } = evt;
			this.navBarHeight = navBarHeight;
		},

		handleClickVideo(index) {
			this.liveList.forEach(item => {
				this.$set(item, 'isAutoPlay', false)
			})
			this.liveList[index].isAutoPlay = !this.liveList[index].isAutoPlay;
			this.$set(this.liveList, index, this.liveList[index]);
			//调用接口增加浏览量 addUserBroadcastViewNum
			this.$api.get({
				url: "/wanlshop/user/addUserBroadcastViewNum",
				data: {
					id: this.liveList[index].id
				},
				success: (res) => { 
					 //不用处理
				},
			});
			console.log('this.liveLis:',this.liveList[index])
			/* console.log(item)
			item.isAutoPlay = !item.isAutoPlay;
			console.log(item) */
		},

	},
	created() {
		this.getSiteLiveInfo();
	},
};
</script>

<style scoped lang="less">
page {
	background-color: #fff;
}

.ysm-padding {
	padding: 32rpx;
}

.ysm-mt {
	margin-bottom: 32rpx;
	position: relative;
	.watch {
		height: 38rpx;
	  position: absolute;
	  top: 10rpx;
	  left:30rpx;
	  z-index: 1;
	
	  font-weight: 400;
	  font-size: 26rpx;
	  line-height: 36rpx;
	  color: #FFFFFF;
	
	  .image-w {
	    display: inline-block;
	    width: 38rpx;
	    height: 38rpx;
	    margin-right: 10rpx;
	    vertical-align: middle;
	  }
	
	  image {
	    width: 100%;
	    height: 100%;
	    // margin-right: 10rpx;
		z-index: 9999;
	  }
	}
	.play-bg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 88rpx;
		height: 88rpx;
	}

	.play-triangle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 28rpx;
		height: 28rpx;
	}
}

page {
	height: 100%;
}

.container {
	background-color: #fff;
	height: 100%;

	.search-wrapper {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 10;
		background-color: #fff;
		padding-bottom: 32rpx;
	}

	.search {
		display: flex;
		align-items: center;
		background: #F6F7FB;
		border-radius: 80rpx;
		height: 60rpx;
		padding: 32rpx;
		width: 90%;
		margin: 32rpx auto 0;
		position: relative;

		.input {
			width: 100%;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;

			/deep/.uni-input {
				width: 90% !important;
			}
		}

		.search_icon {
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translate(0, -50%);
		}
	}

	.liveList {
		// margin-top: 32rpx;
	}

	.empty-wrap {
		width: 100%;
		height: 16rpx;
		background: #f0f0f0;
	}

	.empty {
		margin-top: 20%;
	}

	.top-title {
		font-family: "PingFang SC";
		font-style: normal;
		font-weight: 400;
		font-size: 32rpx;
		line-height: 44rpx;
		color: #333333;
		margin-bottom: 24rpx;
	}

	.main {
		margin-top: 120rpx;
	}

	.video {
		width: 100%;
		height: 380rpx;
		border-radius: 32rpx;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;

		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #808080;
		padding-left: 40rpx;
		padding-right: 42rpx;

		.right {
			display: flex;
			align-content: center;

			.address {
				padding-right: 18rpx;
			}

			.image-wrap {
				width: 18rpx;
				height: 22rpx;

				// margin-right: 24rpx;
				.rotate-image {
					transform: rotate(-90deg);
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.basic-wrap {

		.showInfo-enter-active,
		.showInfo-leave-active {
			transition: all 0.5s;
		}

		.showInfo-enter,
		.showInfo-leave-to {
			max-height: 0;
			opacity: 0;
			overflow: hidden;
		}

		.basic-info-top {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			margin-bottom: 32rpx;

			/deep/ .image-wrap {
				image {
					width: 100%;
					height: 100%;
				}

				.designer-avatar {
					width: 125rpx;
					height: 125rpx;

					.designer_level {
						height: 40rpx;
					}
				}
			}

			.name {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
				margin-left: 24rpx;
				margin-right: 24rpx;
			}

			.sub-title {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #808080;
			}
		}

		.basic-info-con {
			display: flex;
			flex-direction: column;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #808080;

			.title {
				font-weight: 600;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #333333;
				margin-bottom: 32rpx;
			}

			.item {
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 56rpx;
				color: #808080;

				view {
					flex: 1;
				}
			}
		}
	}

}</style>